<template>
	<div class="bear-FunnelChart">
		<SizeObserver
			class="bear-container"
			@bear-resize="$_bear_resizeFn">
			<div ref="chart" class="bear-chart"></div>
		</SizeObserver>
	</div>
</template>

<script>
	import './chart/chart.scss';
	import {chartMixin} from './chart/chart';
	export default{
		name:'FunnelChart',
		mixins:[chartMixin],
		props:{
			mainColor:{
				type:Array,
				default(){
					return [
						'#519bf7',
						'#06d0ab',
						'#b9aefc',
						'#ffb44a',
						'#f53f73',
						'#ebe53a',
						'#61a0a8',
						'#ca8622',
						'#4cd435',
						'#c23531'
					];
				}
			},
			labelFormatter:{
				type:[String,Function],
				default:'{b}'
			}
		},
		computed:{
			$_bear_resetOptionListener(){
				return [this.mainColor,this.tipFormatterFn,this.labelFormatter];
			},
			$_bear_loadChartListener(){
				return [this.nameAttr,this.valueAttr];
			}
		},
		methods:{
			// 重加载报表
			$_bear_loadChart(){
				const nameAttr=this.nameAttr;
				const valueAttr=this.valueAttr;
				let sum=0;
				// 生成报表数据
				this.oldChartData={};
				let maxValue=0;
				this.oldChartData.data=this.data.map(function(ele){
					const value=ele[valueAttr];
					sum+=value;
					maxValue=Math.max(value,maxValue);
					return {
						name:ele[nameAttr],
						value:value,
						extra:ele
					};
				});
				this.oldChartData.sum=sum;
				this.oldChartData.maxValue=maxValue;
				this.resetOption();
			},
			// 重设选项
			$_bear_resetOption(){
				this.chart.setOption({
					color:this.mainColor,
					tooltip:{
						show:true,
						appendToBody:true,
						position:this.$_bear_tipPositionFn,
						formatter:this.tipFormatterFn
					},
					series:[{
						type:'funnel',
						max:this.oldChartData.maxValue,
						top:0,
						bottom:0,
						left:0,
						right:0,
						maxSize:'50%',
						label:{
							show:true,
							formatter:this.labelFormatter,
							fontSize:13
						},
						labelLine:{
							length:20
						},
						data:this.oldChartData.data
					},{
						type:'funnel',
						max:this.oldChartData.maxValue,
						top:0,
						bottom:0,
						left:0,
						right:0,
						maxSize:'50%',
						label:{
							show:true,
							position:'inside',
							formatter:function(param){
								return this.formatter(param.value);
							}.bind(this),
							fontSize:13
						},
						data:this.oldChartData.data
					}]
				},true);
			},
			/**
			 * 重新计算报表大小
			 * @param {Object} data 当前大小
			 * @param {Number} data.width 宽
			 * @param {Number} data.height 高
			 */
			$_bear_resize(data){
				this.chart.resize();
			}
		}
	};
</script>

<style lang="scss">
.bear-FunnelChart{
	>.bear-container{
		position:relative;
		width:100%;
		height:100%;
		>.bear-chart{
			width:100%;
			height:100%;
			z-index:1;
		}
	}
}
</style>
